<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div>

  </div>
</body>
<script>





  import axios from 'axios'

  export const request = createAxiosInstance()

  /* 
  请求拦截器的失败函数进入条件
    1. 条件1
      - 首先设置请求拦截器use方法的第三个参数option对象的synchronous属性为true(打开同步)
      - 当请求拦截器的成功回调中,如果出现了异常信息被抛出,则直接进入失败的回调函数中

    2. 条件2
      - 假设有两个请求拦截器,分别是拦截器1 和 拦截器2,拦截器1先执行,拦截器2后执行
      - 如果拦截器1中的成功函数返回了失败的promise实例,则拦截器2的失败的回调函数会执行
      - 总结:2的失败回调就是为了处理1的成功回调中抛出失败
*/

// 请求 向前插入
// 响应 向后插入



  /* 
    响应拦截器的失败函数进入条件:
      - 请求已经发送到服务器,但是在服务器没有得到预想的结果
      - 比如:超时 服务器宕机(5XX) 找不到数据(4XX)等等
  
  */



  function createAxiosInstance() {
    const instance = axios.create({
      baseURL: process.env.REACT_APP_BASE_URL,
      timeout: 5000,
      headers: {
        // 可定义统一的请求头部
        post: {
          'Content-Type': 'application/json'
        }
      }
    })
    // 添加请求拦截器(在发送请求之前做些什么)
    instance.interceptors.request.use((config) => {
      //可添加开启loading效果的函数
      loading.open()
      //token 存在就添加到请求头里
      token && (config.headers.Authorization = token)
      // 过滤请求参数中的 null undefined ''的函数
      cleanObject()
      return config
    })
    // 添加响应拦截器(对响应数据做点什么)
    instance.interceptors.response.use((response) => {
      //可添加关闭loading效果的函数
      loading.close()
      //解构出返回结果的数据
      const res = response.data
      //对自定义code码进行判断,将成功的数据返回出去
      const validateStatus = /^(2|3)\d{2}$/ //code为2或3开头的视作请求成功
      if (validateStatus.test(res.code)) {
        return res.data
      }
      //判断失败的code码并作出提示等操作
      if (res.code === 401) {
        message.error(res.msg)
      } else {
        message.warning(res.msg)
      }
      return Promise.reject(res)
    },
      (error) => {
        loading.close()  //可添加关闭loading效果的函数
        if (error.response.status === 401) {
          message.error('token失效，请重新登录！')
          removeStorageToken()
          setTimeout(() => {
            window.location.href = '/login'
          }, 2000)
        } else {
          if (!window.navigator.onLine) {
            message.warning('网络异常，请检查网络是否正常连接')
          } else if (error.code === 'ECONNABORTED') {
            message.warning('请求超时')
          } else {
            message.warning('服务器异常，请联系管理员')
          }
        }
        return Promise.reject(error) // 将错误继续返回给到具体页面
      }
    )
    return instance
  }

</script>

</html>